<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.banner {
				width: 500px;
				height: 300px;
				margin: 100px auto;
				position: relative;
			}
			.banner img {
				width: 500px;
				height: 300px;
			}
			.banner span {
				width: 20px;
				height: 30px;
				/* 颜色值 ：英文单词  16进制(红色，绿色，蓝色) rgb(0,0,0) */
				background-color: rgba(0,0,0,0.3);
				/* 绝对定位 */
				position: absolute;
				/* 距离顶部为50% */
				top: 50%;
				/* 往上移动自身一半 */
				margin-top: -15px;
			}
			.banner .left {
				left: 0;
			}
			.banner .right {
				right: 0;
			}
		</style>
	</head>
	<body>
		<div class="banner">
			<img src="2.avif" alt="">
			<span class="left">左</span>
			<span class="right">右</span>
		</div>
	</body>
</html>